<template>
  <el-dialog v-model="visible" title="打印作业" width="700" show-footer show-zoom resize @close="close">
    <template #default>
      <div class="mb-4">
        <el-button type="primary" size="mini" @click="printOrder(1)">内部箱单</el-button>
        <el-button type="primary" size="mini" @click="printOrder(2)">打印箱麦</el-button>
        <el-button type="primary" size="mini" @click="printOrder(3)">打印条码</el-button>
        <el-button type="primary" size="mini" @click="printOrder(4)">打印拣货单</el-button>
      </div>
      <div class="flex items-center">
        <div class="flex items-center mr-4">
          <div class="w-30">FNSKU </div>
          <el-input v-model="fn_sku" placeholder="请输入"></el-input>
        </div>
        <div>
          <div class="flex items-center mb-4">
            <div class="w-40">第 <el-input style="margin-left: 13px;" v-model="box_num" class="w-20" /> 箱 </div>
            <el-button type="primary" size="mini" @click="printOrder(2,true)">箱麦补打</el-button>
          </div>
          <div class="flex items-center mb-4">
            <div class="w-40">份数 <el-input v-model="part02" class="w-20" /></div>
            <el-button  type="primary" size="mini" @click="printOrder(3,true)">条码补打</el-button>
          </div>
          <div class="flex items-center mb-4">
            <div class="w-40">份数 <el-input  v-model="part03"  class="w-20" /></div>
            <el-button type="primary" size="mini" @click="printOrder(5)">打印超重标签</el-button>
          </div>
          <div class="flex items-center mb-4">
            <div class="w-40">份数 <el-input v-model="part04" class="w-20" /></div>
            <el-button  type="primary" size="mini" @click="printOrder(6)">打印透明计划</el-button>
          </div>
        </div>
      </div>

    </template>

    <template #footer>
      <div class="flex justify-center py-2">
        <el-button type="" @click="close">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
  <div ref="print"> </div>
</template>
<script setup name="PrintModal">
import { printHeadOrder } from '../api/index'
import { reactive, ref, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { getLodop } from '@/utils/LodopFuncs.js';

const visible = ref(false)
const emits = defineEmits(['query'])

const data = reactive({
  id: null,
  fn_sku: '',
  box_num: "",
  part02: '',
  part03: '',
  part04: '',
})
const { id, fn_sku,box_num, part02, part03, part04 } = toRefs(data)

const open = (print_id) => {
  id.value = print_id
  visible.value = true
}

const printOrder = async (type,reprint=false) => {
  // if(!fn_sku.value){
  //   ElMessage.error('请输入FNSKU')
  //   return
  // }
  try {
    console.log(reprint)
    const res = await printHeadOrder({
      id: id.value,
      fn_sku: fn_sku.value,
      type,
    })
    handlePrint(type)
  } catch (e) {
    throw Error(e)
  }
}

const print = ref();
const handlePrint = (type) => {
  if (type == 1) {
    const LODOP = getLodop();
    LODOP.SET_PRINT_PAGESIZE(3, 200, 0, "")
    LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", 'Full-Width');
    // LODOP.SET_PRINT_MODE("FULL_HEIGHT_FOR_OVERFLOW", true);
    LODOP.SET_PRINT_STYLE("FontSize", 18);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.SET_PRINT_STYLEA(2,"FontName","宋体");
    LODOP.ADD_PRINT_TEXT(40, 10, '79mm', 15, 'ZHYC-箱唛')
    LODOP.ADD_PRINT_TEXT(40, 140, '79mm', 15, '总箱数：1')
    LODOP.ADD_PRINT_LINE(70,5,74,400,0,4);
    LODOP.ADD_PRINT_TEXT(80, 10, '79mm', 15, 'JP-567-8507')
    // LODOP.ADD_PRINT_RECT(70,20,400,2,1,1);
    LODOP.SET_PRINT_STYLE("FontSize", 14);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.ADD_PRINT_BARCODE(120, 40, 300, 85, "93Extended", 'X003AG10P1');
    LODOP.SET_PRINT_STYLE("FontSize", 20);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.ADD_PRINT_TEXT(225, 60, '79mm', 15, 'D5011867-1')
    LODOP.SET_PRINT_STYLE("FontSize", 12);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.ADD_PRINT_TEXT(260, 70, '79mm', 15, 'Made in china')
    LODOP.ADD_PRINT_TEXT(280, 10, '79mm', 15, 'KIX3')
    LODOP.ADD_PRINT_LINE(300,5,302,400,0,4);



    LODOP.PREVIEW(); // 打印预览
  } else if (type == 2) {
    const LODOP = getLodop();
    LODOP.SET_PRINT_PAGESIZE(3, '80mm', 0, "")
    LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", 'Full-Width');
    LODOP.SET_PRINT_MODE("FULL_HEIGHT_FOR_OVERFLOW", true);
    LODOP.SET_PRINT_STYLE("FontSize", 24);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.SET_PRINT_STYLEA(2,"FontName","宋体");
    LODOP.ADD_PRINT_TEXT(40, '5mm', '79mm', 15, 'FBA')
    LODOP.ADD_PRINT_TEXT(40, '70mm', '79mm', 15, 'Box 4 of 9')
    LODOP.ADD_PRINT_RECT(70,20,400,2,1,1);
    LODOP.SET_PRINT_STYLE("FontSize", 14);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.ADD_PRINT_TEXT(80, '4mm', '80mm', 15, 'SHIP FROM')
    LODOP.ADD_PRINT_TEXT(80, '50mm', '80mm', 15, 'SHIP To')
    LODOP.ADD_PRINT_TEXT(97, '4mm', '80mm', 15, 'DDDD')
    LODOP.ADD_PRINT_TEXT(97, '50mm', '80mm', 15, 'FBA: shenznejjsdhshdhhsdh')
    LODOP.ADD_PRINT_TEXT(114, '4mm', '80mm', 15, 'DDDD')
    LODOP.ADD_PRINT_TEXT(114, '50mm', '80mm', 15, 'FBA: shenznejjsdhshdhhsdh')
    LODOP.ADD_PRINT_TEXT(131, '4mm', '80mm', 15, 'DDDD')
    LODOP.ADD_PRINT_TEXT(131, '50mm', '80mm', 15, 'FBA: shenznejjsdhshdhhsdh')
    LODOP.ADD_PRINT_TEXT(148, '50mm', '80mm', 15, 'United Status')
    LODOP.ADD_PRINT_TEXT(165, '4mm', '80mm', 15, 'vwewe554')
    LODOP.ADD_PRINT_TEXT(165, '50mm', '80mm', 15, 'ceerat 2000/02/24 12:40 PST')
    LODOP.ADD_PRINT_BARCODE(195, '5mm', '60mm', 85, "93Extended", 'X003AG10P1');
    LODOP.ADD_PRINT_BARCODE(195, '80mm', '20mm', 180, "PDF417", 'X003AG10P1');
		LODOP.SET_PRINT_STYLEA(0,"Angle",90);
    LODOP.SET_PRINT_STYLE("FontSize", 24);
    LODOP.ADD_PRINT_TEXT(350, '20mm', '80mm', 25, 'Made In China')
    LODOP.SET_PRINT_STYLE("FontSize", 18);
    LODOP.ADD_PRINT_TEXT(400, '20mm', '80mm', 15, 'PLELES SELELS STT SSADASLL TSRSTSTSTST')
    LODOP.PREVIEW(); // 打印预览
  }else if(type ==3){
    const LODOP = getLodop();
    LODOP.SET_PRINT_PAGESIZE(3, '80mm', 0, "")
    LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", 'Full-Width');
    LODOP.SET_PRINT_MODE("FULL_HEIGHT_FOR_OVERFLOW", true);
    LODOP.SET_PRINT_STYLE("FontSize", 8);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.ADD_PRINT_BARCODE(40, '5mm', '79mm', 85, "93Extended", 'X003AG10P1');
    LODOP.SET_PRINT_STYLEA(0, "AlignJustify", 2);
    LODOP.SET_PRINT_STYLE("FontSize", 12);
    LODOP.ADD_PRINT_TEXT(130, '4mm', '80mm', 20, "ACLONG TPMS Sensor Sensor Compation B,560")
    LODOP.ADD_PRINT_TEXT(145, '4mm', '80mm', 15, "29398AA 433MHz -4 pcs")
    LODOP.ADD_PRINT_TEXT(160, '4mm', '80mm', 15, 'New')
    LODOP.ADD_PRINT_TEXT(160, '65mm', '80mm', 15, '3751541')
    LODOP.ADD_PRINT_TEXT(175, '4mm', '80mm', 15, "Made In China")
    LODOP.PREVIEW(); // 打印预览
  }else if(type == 4){
    const LODOP = getLodop();
  LODOP.SET_PRINT_PAGESIZE(1, '600mm', 0, "")
  LODOP.ADD_PRINT_TEXT(25, 32, 135, 29, "打印人:TimyLuo");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  LODOP.ADD_PRINT_TEXT(25, 177, 195, 32, "打印时间：2023/09/21 17:35:41");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.ADD_PRINT_TEXT(63, 32, 150, 25, "调拨单号: DB1234485855");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.ADD_PRINT_TEXT(63, 180, 150, 25, "Shipment ID/海外仓入库单号");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.ADD_PRINT_BARCODE(25, 393, 263, 67, "Code39", "123456789012");
  const table = `<style> table{width：400px} table,td,th {border: 1px solid black;border-style: solid;border-collapse: collapse}</style><table border = "1" width = 630 ><tr><td>SKU</td><td>数量</td><td>货位</td><td>图片</td><td>产品名称</td></tr>
  <tr>
    <td>
  <div>自定义SKU</div>
  <div>SKU</div>
  <div>第三方SKU/FNSKU</div>
  </td>
    <td>2</td>
    <td>SD-2323</td>
    <td></td>
    <td>
    <div>产品名称</div>
    <div>产品属性</div>
    <div>颜色尺寸</div>
    <div>箱PCS数</div>
    <div>装箱规格</div>
  </td>
  </tr>
  </table>`
  LODOP.ADD_PRINT_TABLE(182, 25, 732, 155, table);
  LODOP.ADD_PRINT_RECT(137, 27, 630, 45, 0, 1);
  LODOP.ADD_PRINT_TEXT(144, 40, 612, 35, "建单人，国家简码，目的地地址");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.PREVIEW(); // 打印预览

  }else if(type == 5){

  }else if(type == 6){

}
}

const close = () => {
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.w-30 {
  width: 6rem;
}
</style>
